<template>
	<view class="contont" :style="{height:screenHeight+'px'}">
		<view class="rgba-back" :style="{height:screenHeight+'px'}">
			<top-tabbar @backClick="backClick"></top-tabbar>
			<view class="input-btn-login">
				<input class="uni-input" 
				placeholder="请输入用户名" 
				v-model="fromData.account"
				maxlength="11"
				type="number"
				placeholder-style="font-size: 32rpx;font-family: Adobe Heiti Std;font-weight: normal;color: #ADADAD;"
				></input>
				<view class="verify-input-code">
					<input class="verify"
					placeholder="请输入验证码" 
					v-model="fromData.code"
					maxlength="4"
					@input="inputCode"
					placeholder-style="font-size: 32rpx;font-family: Adobe Heiti Std;font-weight: normal;color: #ADADAD;"
					></input>
					<view class="code">
						<image :src="base64Url" class="code-img"></image>
					</view>
					<view class="iconfont icons" @click="createCode()">&#xe6ca;</view>
				</view>
				<input class="uni-input"
				placeholder="请输入密码" 
				maxlength="12"
				v-model="fromData.password"
				@input="inputCode"
				placeholder-style="font-size: 32rpx;font-family: Adobe Heiti Std;font-weight: normal;color: #ADADAD;"
				></input>
				<view class="right-away" @click="rightLogin">立即登录</view>
				<view class="forget-password" @click="setPassword">忘记密码？</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topTabbar from '@/components/top-tabbar.vue'
	import { pathToBase64, base64ToPath } from '@/components/mmmm-image-tools/index.js'
	import { $POST, $GET } from '../../network/api.js'
	import  md5  from '@/components/md5/md5.js' 
	export default {
		components: { topTabbar },
		data() {
			return {
				fromData: {
					account: '',
					code: null,
					password: ''
				},
				base64Url:'',
				checkCode: "",
				screenHeight: uni.getSystemInfoSync().screenHeight, // 屏幕高度
				statuHeight: uni.getSystemInfoSync().statusBarHeight // 状态栏高度
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.createCode()
		},
		methods:{
			// 立即登录
			async rightLogin() {
				if (!this.verify()) {
				  return false
				}
				let obj= {
					account: this.fromData.account,
					code: this.fromData.code,
					password: md5(this.fromData.password)
				}
				// const res = await $POST('/boke-user/user/login',obj)
				// if (res.code === "0000000") {
				// 	uni.showToast({title: "登录成功", icon:'none'})
				// 	uni.setStorageSync('user_key', res.data)
				// 	uni.setStorageSync('authorization', res.data.token)
					uni.switchTab({
					 	url: '/pages/home/index'
					})
				// }
			},
			// 获取图片验证码
		  async	createCode() {
				const vm = this
				const res = await	$GET('/boke-user/user/getImgCode')
				base64ToPath(res).then(path => {
					vm.base64Url = path
					console.log("验证码数据：",vm.base64Url)
				})
			},
			// 验证码inpout事件
			inputCode(e) {
				if(!(/^[a-zA-Z0-9_]{1,}$/.test(e.detail.value))){
					uni.showToast({title: "只能输入字母与数字", icon:'none'})
					return false
				}
			},
			// 验证
			verify() {
				if (!this.fromData.account) {
					uni.showToast({title: "请输入用户名", icon:'none'})
					return false
				}
				if(!(/^1[3456789]\d{9}$/.test(this.fromData.account))){
					uni.showToast({ title: "手机号码不正确",	icon:'none'});     
					return false; 
				}
				if (!this.fromData.code) {
					uni.showToast({title: "请输入验证码", icon:'none'})
					return false
				}
				if (!this.fromData.password) {
					uni.showToast({title: "请输入密码", icon:'none'})
					return false
				}
				return true
			},
			// 忘记密码
			setPassword() {
				uni.navigateTo({
				  url: '/pages/login/setpassword'
				})
			},
			// 
			// 返回上一页
			backClick() {
				uni.navigateTo({
				  url: '/pages/login/preposition'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contont{
		background: url("~@/static/login/login_back.jpg");
		background-repeat:no-repeat; 
		 background-size:100% 100%;
		 -moz-background-size:100% 100%;
		 .rgba-back{
			 	background: rgba(49,49,49,0.6);
			 .tabBer-back{
			 	height: 88rpx;
			 	line-height: 88rpx;
			 }
			 .input-btn-login{
			 	padding-top: 170rpx;
			 	display: flex;
			 	flex-direction: column;
			 	justify-content: center;
			 	align-items: center;
			 	.uni-input{
			 		width: 638rpx;
			 		height: 96rpx;
			 		background: rgba(93, 87, 83,0.5);
			 		border-radius: 48rpx;
			 		line-height: 48px;
			 		padding-left: 46rpx;
					color: #FFFFFF;
					box-sizing: border-box;
			 		/deep/ .input-placeholder{
			 			font-size: 32rpx;
			 			font-family: Adobe Heiti Std;
			 			font-weight: normal;
			 			color: #ADADAD;
						
			 		}
			 	}
			 	.verify-input-code{
			 		padding:36rpx 0;
			 		display: flex;
			 		align-items: center;
			 		.verify{
			 			width: 302rpx;
			 			height: 96rpx;
			 			background: rgba(98, 98, 98,0.5);
			 			border-radius: 48rpx;
						line-height: 48px;
						padding-left: 25rpx;
						color: #FFFFFF;
						box-sizing: border-box;
			 			/deep/ .input-placeholder{
			 				font-size: 32rpx;
			 				font-family: Adobe Heiti Std;
			 				font-weight: normal;
			 				color: #ADADAD;
							
			 			}
			 		}
			 		.code{
			 			width: 227rpx;
			 			height: 96rpx;
			 			border-radius: 10rpx;
			 			margin: 0 26rpx 0 50rpx;
						position: relative;
						box-sizing: border-box;
						.code-img{
							width: 100%;
							height: 100%;
						}
						.code-text{
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							font-size: 56rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #43483A;
							line-height: 48px;
							text-align: center;
						}
			 		}
			 		.iconfont{
			 			color: #ADADAD;
			 		}
			 	}
				.right-away{
					width: 638rpx;
					height: 96rpx;
					border-radius: 48rpx;
					background: rgba(146, 146, 146,0.5);
					line-height: 96rpx;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F6F6F6;
					margin: 75rpx 0 46rpx 0;
					box-sizing: border-box;
				}
				.forget-password{
					width: 638rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #C2C2C2;
					text-align: right;
					box-sizing: border-box;
				}
			 }
		 }
	}
	
</style>
